<template>
	<view class="index-content">
    <Navbar :hideBtn="true" title="首页" bgColor="#fff" :h5Show="true" :fixed="false"></Navbar>
	<view v-if="showNotice">
	    <u-notice-bar :text="noticeTitle" mode="closable" :url="noticeUrl"></u-notice-bar>
	  </view>
	<view class="index-block">
	 <u-swiper :list="lbtList" @click="lbtClick" :height="200" keyName="picPath" showTitle :autoplay="true" circular></u-swiper>
	</view>
    <view class="index-block">
      <view>
		  <view class="index-block-title">
		  	特别推荐
		  </view>
		<view class="index-block-btn" @click="navigateTo('/pages/business/shareData/list')">查看更多</view>
	  </view>
      <view>
        <view v-if="shareList && shareList.length > 0">
          <u-cell v-for="(item, index) in shareList" :key="index" :isLink="true" :border="true" @click="searchDetail(item.detailId)">
            <!-- <u-avatar slot="icon" :bg-color="item.noticeType == 2 ? '#2979ff' : '#19be6b'" :text="item.noticeType == 2 ? '公' : '通'" shape="square"></u-avatar> -->
            <view slot="title" class="notice-record-title">{{item.title}}</view>
            <view slot="label" class="notice-record-desc">
              <view style="display: flex;">
                <u-icon name="clock" size="12"></u-icon>
                <text>{{item.releaseTime}}</text>
              </view>
              <!-- <view style="display: flex; margin-left: 16px;">
                <u-icon name="account" size="12"></u-icon>
                <text>{{item.clickNum}}</text>
              </view> -->
            </view>
          </u-cell>
        </view>
        <u-empty v-else></u-empty>
      </view>
    </view>
	
	<view class="index-block" v-if="mapList" v-for="(items, key) in mapList" :key="key">
		<view>
			<view class="index-block-title">{{key}}</view>
			<view class="index-block-btn" @click="searchMore(items,key)">查看更多</view>
		</view>
	  <view>
	    <view v-if="items">
	      <u-cell v-for="(item, index) in items" :key="index" :isLink="true" :border="true" @click="searchDetail(item.detailId)">
	        <!-- <u-avatar slot="icon" :bg-color="'#2979ff'" :text="item.comefrom" shape="square"></u-avatar> -->
	        <view slot="title" class="notice-record-title">{{item.title}}</view>
	        <view slot="label" class="notice-record-desc">
	          <view style="display: flex;">
	            <u-icon name="clock" size="12"></u-icon>
	            <text>{{item.releaseTime}}</text>
	          </view>
	          <!-- <view style="display: flex; margin-left: 16px;">
	            <u-icon name="account" size="12"></u-icon>
	            <text>{{item.remark}}</text>
	          </view> -->
	        </view>
	      </u-cell>
	    </view>
	    <u-empty v-else></u-empty>
	  </view>
	</view>
	<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'

const { environment } = require('@/config/environment.js')
import * as NoticeApi from '@/api/work/notice'
import * as indexApi from '@/api/business/index'

export default {
  components: {
    Navbar,
  },
  data () {
    return {
      isCanvas2d: true,
      delayload: false,
	  lbtList: [],
	  shareList: [],
	  mapList: new Map(),
	  noticeTitle: '',
	  noticeUrl: '',
	  showNotice: false
    }
  },
  mounted() {
      const app = this;
      uni.$on('update', function(data) {
          app.getLastNotice()
      })
  },    
  //为了优化代码，可以加上移除事件，避免重复监听事件
  onUnload() {
      // 移除监听事件  
      uni.$off('update');
  },
  created() {
  	this.loadData();
	this.loadLbt();
	this.getShareList();
	this.getLastNotice()
  },
  methods: {
	  async getLastNotice(){
		  this.showNotice = false
		  NoticeApi.noticeLastOne().then(res => {
			  let data = res.data
			  if(data != null){
				  this.noticeUrl = '/pages/work/notice/detail?id=' + data.noticeId
				  this.noticeTitle = data.noticeTitle
				  if(data.checkFlag == -1){
					this.showNotice = true
				  }
			  }
		  })
	  },
	  navigateTo (url) {
	    uni.navigateTo({ url: url })
	  },
	  async loadData () {
	    indexApi.getIndexList().then(res => {
	      this.mapList = res.data;
	    })
	  },
	  async getShareList(){
	  	indexApi.getShareList().then(res => {
	  		this.shareList = res.data; 			
	  	})	  
	  },
	  async loadLbt(){
		  indexApi.lbtList().then(res => {
			  this.lbtList = res.data;
		  })
	  },
	  lbtClick(index){
		let id = this.lbtList[index].id;
		this.searchDetail(id)
	  },
	  searchMore(items, title){
		  let columnId = ''
		  if(items){
			  columnId = items[0].columnId
		  }
		  uni.navigateTo({ url: '/pages/business/columnDetail/list?columnId=' + columnId + '&title=' + title})
	  },
	  searchDetail(id){
	  	uni.navigateTo({ url: '/pages/business/columnDetail/detail?id=' + id})
	  }
  }
}
</script>

<style lang="scss">
.index-content {
  background-color: #f3f4f6;
  min-height: 100vh;
}
.index-block {
  padding: 40rpx;
  background-color: #fff;
}
.index-block-title {
  font-size: 40rpx;
  font-weight: bold;
  padding: 0 0 40rpx 0;
  display: inline;
}
.index-block-btn{
	padding: 0 0 40rpx 0;
	display: inline;
	float: right;
	color: #2979ff;
}
.item-tj {
  width: 100%;
  height: 160rpx;
  border-radius: 16rpx;
  
  &-frist {
    background-color: rgba($color: #2979ff, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-second {
    background-color: rgba($color: #303133, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-thrid {
    background-color: rgba($color: #19be6b, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }
}
.detail_list{
  height: 700rpx;
  overflow: auto;
  color: #9E9E9E;
  .detail_item{
    display: flex;
    margin: 20rpx 0;
    align-items: center;
    .icon{
      width: 30%;
      text-align: center;
      li{
        font-size: 80rpx;
      }
    }
    .right_content{
      width: 50%;
      text-align: center;
    }
    .icon-income{
      color:#4AABF9;
    }
    .icon-expend{
      color: #E45521;
    }
    .money{
      color: #000;
    }
  }
}
</style>
